<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>新闻列表</title>
  <style>
    .news-item {
      display: flex;
      border: 1px solid #eee;
      width: 700px;
      padding: 10px;
      margin-bottom: 5px;
    }

    .thumb {
      display: block;
      width: 230px;
      height: 140px;
      background-color: #ccc;
      margin-right: 10px;
    }

    .right-box {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      font-size: 12px;
      flex: 1;
    }

    .title {
      font-size: 20px;
      font-weight: normal;
    }

    .tags span {
      display: block;
      float: left;
      background-color: #F0F0F0;
      line-height: 20px;
      padding: 0 10px;
      border-radius: 10px;
      margin-right: 8px;
    }

    .footer {
      display: flex;
      justify-content: space-between;
    }
  </style>
</head>

<body>
  <div id="news-list">
    <!-- <div class="news-item">
      <img class="thumb" src="" alt="" />
      <div class="right-box">
        <h1 class="title">5G商用在即，三大运营商营收持续下降</h1>
        <div class="tags">
          <span>三大运营商</span>
          <span>中国移动</span>
          <span>5G商用</span>
        </div>
        <div class="footer">
          <div>
            <span>胡润百富</span>&nbsp;&nbsp;
            <span>2019-10-28 10:14:38</span>
          </div>
          <span>评论数：66</span>
        </div>
      </div>
    </div> -->
  </div>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script>
    const container = document.querySelector('#news-list')
    axios({
      url: 'http://42.192.45.224:3007/api/news'
    }).then(({ data }) => {
      const htmlStr = data.data.map(item => {
        const { title, tags, author, pub_date, count, picture } = item
        const tagArr = tags ? tags.split(',') : []
        const tagsHtmlStr = tagArr.map(tag => `
            <span>${tag}</span>
          `).join('')
        return `
          <div class="news-item">
            <img class="thumb" src="http://42.192.45.224:3007${picture}" alt="" />
            <div class="right-box">
              <h1 class="title">${title}</h1>
              <div class="tags">
                ${tagsHtmlStr}
              </div>
              <div class="footer">
                <div>
                  <span>${author}</span>&nbsp;&nbsp;
                  <span>${formatTime(+pub_date)}</span>
                </div>
                <span>评论数：${count}</span>
              </div>
            </div>
          </div>
          `
      }).join('')
      container.innerHTML = htmlStr
    })

    const padZero = n => n > 9 ? n : '0' + n

    function formatTime(time) {
      const date = new Date(time)

      const Y = date.getFullYear()
      const M = padZero(date.getMonth() + 1)
      const D = padZero(date.getDate())
      const H = padZero(date.getHours())
      const m = padZero(date.getMinutes())
      const s = padZero(date.getSeconds())

      return `${Y}-${M}-${D} ${H}:${m}:${s}`
    }

  </script>
</body>

</html>